{include file='pub/header'/}
<title>新增商品</title>
<style>
	.tips{
		/*display: inline-block;*/
	}

</style>
</head>
<body>
<div class="page-container">
	<form class="form form-horizontal" id="form-product-add" enctype="multipart/form-data">
		<input type="hidden" name="cate_name" value="" id="cate_name"/>
		<input type="hidden" name="cate_parent_id" value="" id="cate_parent_id"/>
		<div id="tab_demo" class="HuiTab">
			<div class="tabBar clearfix"><span>基础信息</span><span>规格设置</span><span>附加属性</span><span>商品详情</span></div>
			<div class="tabCon">
				<!-- 商品分类 -->
				<div class="row cl">
					<label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>分类：</label>
					<div class="formControls col-xs-8 col-sm-9">
						<!--<span class="select-box" style="width: 300px;">-->
							<!--<select id="cateId1" name="" class="select" size="1" required></select>-->
						<!--</span>-->
						<!--<span class="select-box" style="width: 300px;">-->
							<!--<select id="cateId2" name="cate_id" class="select" size="1" required></select>-->
						<!--</span>-->
						<span class="select-box" style="width: 300px;">
							<select id="cate" name="" class="select" size="1" required>
								<option value="0">请选择分类</option>
								{foreach $cateTree as $c1}
									<option value="{$c1.id}">{$c1.name}</option>
									{if count($c1.children)>0}
									{foreach $c1.children as $c2}
									<option value="{$c1.id},{$c2.id}">{$c1.name}-{$c2.name}</option>
									{/foreach}
									{/if}
								{/foreach}

							</select>
						</span>
					</div>
				</div>
				<!--商品名称-->
				<div class="row cl">
					<label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>产品名称：</label>
					<div class="formControls col-xs-8 col-sm-9">
						<input type="text" class="input-text" value="" placeholder="" name="name" required>
					</div>
				</div>
				<!--商品图片-->
				<div class="row cl">
					<label class="form-label col-xs-4 col-sm-2">商品展示缩略图(参考尺寸 320*270)：</label>
					<div class="formControls col-xs-8 col-sm-9">
						<div class="uploader-thum-container">
							<div id="fileList" class="uploader-list">
							</div>
							<div id="filePicker">选择图片</div>
						</div>
					</div>
				</div>
				<div class="row cl">
					<label class="form-label col-xs-4 col-sm-2">商品展示轮播图(参考尺寸 414*220)：</label>
					<div class="formControls col-xs-8 col-sm-9">
						<div class="uploader-thum-container">
							<div id="fileList1" class="uploader-list">
							</div>
							<div id="filePicker1">选择图片</div>
						</div>
					</div>
				</div>
				<!--扩充名称-->
				<div class="row cl">
					<label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>产品扩充名称：</label>
					<div class="formControls col-xs-8 col-sm-9">
						<input type="text" class="input-text" value="" placeholder="" name="bname">
					</div>
				</div>
				<!--商品排序值-->
				<div class="row cl">
					<label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>产品排序值：</label>
					<div class="formControls col-xs-8 col-sm-9">
						<input type="text" class="input-text" value="" placeholder="" name="ord">
					</div>
				</div>
				<!--是否首页显示-->
				<div class="row cl">
					<label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>是否首页显示：</label>
					<div class="formControls col-xs-8 col-sm-9">
						<select name="is_index" class="select">
							<option value="0">否</option>
							<option value="1">是</option>
						</select>
					</div>
				</div>
				<!--代理商返利利率-->
				<div class="row cl">
					<label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>代理商返利利率：</label>
					<div class="formControls col-xs-8 col-sm-9">
						<input type="text" class="input-text" value="" placeholder="" name="agent_commission">
					</div>
				</div>
				<!--业务员返利利率-->
				<div class="row cl">
					<label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>业务员返利利率：</label>
					<div class="formControls col-xs-8 col-sm-9">
						<input type="text" class="input-text" value="" placeholder="" name="salesman_commission">
					</div>
				</div>
				<!--兼职代理返利利率-->
				<div class="row cl">
					<label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>兼职代理返利利率：</label>
					<div class="formControls col-xs-8 col-sm-9">
						<input type="text" class="input-text" value="" placeholder="" name="parttime_commission">
					</div>
				</div>
				<!--限购数量-->
				<div class="row cl">
					<label class="form-label col-xs-4 col-sm-2">限购数量：</label>
					<div class="formControls col-xs-4 col-sm-2">
						<input type="text" class="input-text" value="" placeholder="默认0为不限购" name="limit_num">
					</div>
				</div>
				<!--运费-->
				<div class="row cl">
					<label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>运费：</label>
					<div class="formControls col-xs-8 col-sm-9">
						<input type="text" class="input-text" value="" placeholder="20.00" name="send_fee">
					</div>
				</div>
				<!--是否包邮-->
				<div class="row cl">
					<label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>是否包邮：</label>
					<div class="formControls col-xs-8 col-sm-9">
					<span class="select-box">
						<select name="is_send" class="select">
							<option value="0">
								否
							</option>
							<option value="1">
								是
							</option>
						</select>
					</span>
					</div>
				</div>
			</div>
			<div class="tabCon">
				<!--规格信息-->
				{foreach $prop_name as $k=>$v}
				{if $v=="规格"}
					<div class="row cl prop">
						<label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>{$v}：</label>
						<div class="formControls col-xs-8 col-sm-9">
							<div>
								<input type="text" class="input-text prop_search" style="width: 200px;">
								<button class="size-M btn btn-default prop_search_btn" type="button">查找</button>
							</div>
							{foreach $prop_value["$k"] as $k1=>$v1}
							<label style="display: none;" class="prop_value"><input type="checkbox" name="prop[]" value="{$k}|{$v}:{$k1}|{$v1}" onclick="loadProp()" data-prop_value_id="{$k1}" data-prop_value="{$v1}" data-prop_name="{$v}" data-prop_id="{$k}">{$v1}&nbsp;&nbsp;</label>
							{/foreach}
						</div>
					</div>
				{else/}
					<div class="row cl prop">
						<label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>{$v}：</label>
						<div class="formControls col-xs-8 col-sm-9">
							{foreach $prop_value["$k"] as $k1=>$v1}
							<label style="display: inline-block;"><input type="checkbox" name="prop[]" value="{$k}|{$v}:{$k1}|{$v1}" onclick="loadProp()" data-prop_value_id="{$k1}" data-prop_value="{$v1}" data-prop_name="{$v}" data-prop_id="{$k}">{$v1}&nbsp;&nbsp;</label>
							{/foreach}
						</div>
					</div>
				{/if}
				{/foreach}

				<script>
					function loadProp(){
						var prop_node = $(".prop");
						var prop_arr = new Array();
						$.each(prop_node, function(i,v){
							var p_arr = $(v).find("input[type=checkbox]:checked");
							if(p_arr.length>0){
								var prop_name = "";
								var prop_id = "";
								var prop_value = new Array();
								$.each(p_arr, function (i1, v1) {
									prop_name = $(v1).data('prop_name');
									prop_id = $(v1).data('prop_id');
									var t1 = {
										prop_value:$(v1).data('prop_value'),
										prop_value_id:$(v1).data('prop_value_id')
									}
									prop_value.push(t1);
								});
								var t = {
									prop_name:prop_name,
									prop_id:prop_id,
									prop_value:prop_value
								};
								prop_arr.push(t);
							}
						});
						if(!prop_arr.length>0){
							layer.msg('请选择规格值后再操作');
							$(".table-prop").html('');
							return false;
						}

						var tableHtml = "";
						tableHtml += "<table class='table table-border table-bordered'><thead><tr>";
						$.each(prop_arr, function (i,v) {
							tableHtml += "<th>"+v.prop_name+"</th>";
						});
						tableHtml += "<th>单价</th><th>件价</th><th>库存</th><th>库存预警数量</th><th>外部编码</th>";
						tableHtml += "</tr></thead>";
						tableHtml += "<tbody>";
						var numsArr = new Array();
						var idxArr = new Array();
						for (var i = 0; i < prop_arr.length; i++) {
							numsArr.push(prop_arr[i].prop_value.length);
							idxArr[i] = 0;
						}

						var len = 1;
						var rowsArr = new Array();
						for (var i = 0; i < numsArr.length; i++) {
							len = len * numsArr[i];

							var tmpnum = 1;
							for (var j = numsArr.length - 1; j > i; j--) {
								tmpnum = tmpnum * numsArr[j];
							}
							rowsArr.push(tmpnum);
						}

						for (var i = 0; i < len; i++) {
							var id = "";
							var prop_name = "";
							tableHtml += '<tr data-row="' + (i+1) + '">';
							for (var j = 0; j < prop_arr.length; j++) {
								var n = parseInt(i / rowsArr[j]);
								if (j == 0) {
								} else if (j == prop_arr.length - 1) {
									n = idxArr[j];
									if (idxArr[j] + 1 >= numsArr[j]) {
										idxArr[j] = 0;
									} else {
										idxArr[j]++;
									}
								} else {
									var m = parseInt(i / rowsArr[j]);
									n = m % numsArr[j];
								}
								var name = prop_arr[j].prop_value[n].prop_value;
								var _id = prop_arr[j].prop_value[n].prop_value_id;
								id += _id + '|';
								prop_name += name + '|';
								if (i % rowsArr[j] == 0) {
									tableHtml += '<td rowspan="' + rowsArr[j] + '" data-rc="' +_id+ '">'+name+'</td>';
								}
							}
							id = id.substr(0, id.length-1);
							prop_name = prop_name.substr(0, prop_name.length-1);
							tableHtml += '<td><input type="text" class="input-text" name="prop_attr['+id+'][price_one]" style="width: 60px;" required/></td>';
							tableHtml += '<td><input type="text" class="input-text" name="prop_attr['+id+'][price_comb]" style="width: 60px;" required/></td>';
							tableHtml += '<td><input type="text" class="input-text" name="prop_attr['+id+'][remain]" style="width: 60px;" required/></td>';
							tableHtml += '<td><input type="text" class="input-text" name="prop_attr['+id+'][limit_remain]" style="width: 60px;" required/></td>';
							tableHtml += '<td><input type="text" class="input-text" name="prop_attr['+id+'][gno]" style="width: 60px;"/></td>';
							// tableHtml += '<td><input type="file" class="input-text" name="prop_attr['+id+'][img_url]" style="font-size: 12px;"/></td>';
							tableHtml += '<input type="hidden" value="'+prop_name+'" name="prop_attr['+id+'][prop_name]"/>'
							tableHtml += '</tr>';
						}
						tableHtml += "</tbody>";
						tableHtml += "</table>";
						$(".table-prop").html(tableHtml);
					}
				</script>

				<div class="row cl">
					<label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>销售属性：</label>
					<div class="formControls col-xs-8 col-sm-9">
						<button type="button" onclick="loadProp()" class="btn radius">生成商品销售属性表</button>
					</div>
				</div>

				<div class="row cl">
				<label class="form-label col-xs-4 col-sm-2"></label>
				<div class="formControls col-xs-8 col-sm-9 table-prop">


				</div>
			</div>
			</div>
			<div class="tabCon">
				<!--SEO优化-->
				<div class="row cl">
					<label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>页面标题：</label>
					<div class="formControls col-xs-8 col-sm-9">
						<input type="text" class="input-text" value="" placeholder="" name="web_title">
					</div>
				</div>
				<div class="row cl">
					<label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>页面关键字：</label>
					<div class="formControls col-xs-8 col-sm-9">
						<input type="text" class="input-text" value="" placeholder="" name="web_keywords">
					</div>
				</div>
				<div class="row cl">
					<label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>页面描述：</label>
					<div class="formControls col-xs-8 col-sm-9">
						<input type="text" class="input-text" value="" placeholder="" name="web_description">
					</div>
				</div>
				<!--附加属性-->
				<div class="row cl">
				<div class="row col-xs-4">
					<label class="form-label col-xs-4 col-sm-6">农药登记证号：</label>
					<div class="formControls col-xs-8 col-sm-6">
						<input type="text" class="input-text" value="" placeholder="" name="load_id">
					</div>
				</div>
				<div class="row col-xs-4">
					<label class="form-label col-xs-4 col-sm-6">农药成分：</label>
					<div class="formControls col-xs-8 col-sm-6">
						<input type="text" class="input-text" value="" placeholder="" name="component">
					</div>
				</div>
				<div class="row col-xs-4">
					<label class="form-label col-xs-4 col-sm-6">生产企业：</label>
					<div class="formControls col-xs-8 col-sm-6">
						<input type="text" class="input-text" value="" placeholder="" name="enterprise">
					</div>
				</div>
				<div class="row col-xs-4">
					<label class="form-label col-xs-4 col-sm-6">有效成分含量高：</label>
					<div class="formControls col-xs-8 col-sm-6">
						<input type="text" class="input-text" value="" placeholder="" name="effect_ratio">
					</div>
				</div>
				<div class="row col-xs-4">
					<label class="form-label col-xs-4 col-sm-6">生产许可证：</label>
					<div class="formControls col-xs-8 col-sm-6">
						<input type="text" class="input-text" value="" placeholder="" name="produce_code">
					</div>
				</div>
				<div class="row col-xs-4">
					<label class="form-label col-xs-4 col-sm-6">剂型：</label>
					<div class="formControls col-xs-8 col-sm-6">
						<input type="text" class="input-text" value="" placeholder="" name="dosage_form">
					</div>
				</div>
				<div class="row col-xs-4">
					<label class="form-label col-xs-4 col-sm-6">毒性：</label>
					<div class="formControls col-xs-8 col-sm-6">
						<input type="text" class="input-text" value="" placeholder="" name="toxicity">
					</div>
				</div>
				<div class="row col-xs-4">
					<label class="form-label col-xs-4 col-sm-6">品牌：</label>
					<div class="formControls col-xs-8 col-sm-6">
						<input type="text" class="input-text" value="" placeholder="" name="brand">
					</div>
				</div>
				<div class="row col-xs-4">
					<label class="form-label col-xs-4 col-sm-6">农药产品标准证号：</label>
					<div class="formControls col-xs-8 col-sm-6">
						<input type="text" class="input-text" value="" placeholder="" name="standard_number">
					</div>
				</div>
				<div class="row col-xs-4">
					<label class="form-label col-xs-4 col-sm-6">防治对象：</label>
					<div class="formControls col-xs-8 col-sm-6">
						<input type="text" class="input-text" value="" placeholder="" name="prevent">
					</div>
				</div>
			</div>
			</div>
			<div class="tabCon">
				<!--商品详情-->
				<div class="row cl">
				<label class="form-label col-xs-4 col-sm-2">移动端商品详情：</label>
				<div class="formControls col-xs-8 col-sm-9">
					<script id="editor" name="mob_detail" type="text/plain" style="width:100%;height:400px;"></script>
				</div>
			</div>
			<div class="row cl">
				<label class="form-label col-xs-4 col-sm-2">PC端商品详情：</label>
				<div class="formControls col-xs-8 col-sm-9">
					<script id="editor1" name="web_detail" type="text/plain" style="width:100%;height:400px;"></script>
				</div>
			</div>
			</div>
			<div class="row cl">
				<div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-2">
					<button class="btn btn-secondary radius" type="submit"><i class="Hui-iconfont">&#xe632;</i> 保存商品</button>
					<button onClick="layer_close();" class="btn btn-default radius" type="button">&nbsp;&nbsp;取消&nbsp;&nbsp;</button>
				</div>
			</div>
		</div>
	</form>
</div>


{include file="pub/footer"/}
<script type="text/javascript" src="__STATIC__/lib/ueditor/1.4.3/ueditor.config.js"></script>
<script type="text/javascript" src="__STATIC__/lib/ueditor/1.4.3/ueditor.all.min.js"> </script>
<script type="text/javascript" src="__STATIC__/lib/ueditor/1.4.3/lang/zh-cn/zh-cn.js"></script>
<script type="text/javascript">

$(function(){
	$.Huitab("#tab_demo .tabBar span","#tab_demo .tabCon","current","click","0");
    var ue = UE.getEditor('editor',{
		toolbars: [
			[
				'anchor', //锚点
				'undo', //撤销
				'redo', //重做
				'bold', //加粗
				'indent', //首行缩进
				'italic', //斜体
				'underline', //下划线
				'strikethrough', //删除线
				'subscript', //下标
				'superscript', //上标
				'formatmatch', //格式刷
				'horizontal', //分隔线
				'removeformat', //清除格式
				'time', //时间
				'date', //日期
				'fontfamily', //字体
				'fontsize', //字号
				'paragraph', //段落格式
				'simpleupload', //单图上传
				'insertimage', //多图上传
				'spechars', //特殊字符
				'searchreplace', //查询替换
				'justifyleft', //居左对齐
				'justifyright', //居右对齐
				'justifycenter', //居中对齐
				'justifyjustify', //两端对齐
				'forecolor', //字体颜色
				'imagecenter', //居中
				'lineheight', //行间距
				'customstyle', //自定义标题
				'autotypeset', //自动排版
				'touppercase', //字母大写
				'tolowercase', //字母小写
				'background', //背景
			]
		],
		autoHeightEnabled: true,
		autoFloatEnabled: false
	});
    var ue1 = UE.getEditor('editor1',{toolbars: [
			[
				'anchor', //锚点
				'undo', //撤销
				'redo', //重做
				'bold', //加粗
				'indent', //首行缩进
				'italic', //斜体
				'underline', //下划线
				'strikethrough', //删除线
				'subscript', //下标
				'superscript', //上标
				'formatmatch', //格式刷
				'horizontal', //分隔线
				'removeformat', //清除格式
				'time', //时间
				'date', //日期
				'fontfamily', //字体
				'fontsize', //字号
				'paragraph', //段落格式
				'simpleupload', //单图上传
				'insertimage', //多图上传
				'spechars', //特殊字符
				'searchreplace', //查询替换
				'justifyleft', //居左对齐
				'justifyright', //居右对齐
				'justifycenter', //居中对齐
				'justifyjustify', //两端对齐
				'forecolor', //字体颜色
				'imagecenter', //居中
				'lineheight', //行间距
				'customstyle', //自定义标题
				'autotypeset', //自动排版
				'touppercase', //字母大写
				'tolowercase', //字母小写
				'background', //背景
			]
		],
		autoHeightEnabled: true,
		autoFloatEnabled: false
	});
	//动态添加分类  结束
	$("#cate").change(function () {
		var cate_id = $(this).val();
		if(cate_id==0){
			return false;
		}
		var cate_name = $(this).find("option:selected").html().replace(/&nbsp\;/g, "");
		var cate_html = '<span style="background-color: #ccc; padding: 2px;margin: 2px;">'+cate_name+'<i class="Hui-iconfont Hui-iconfont-del" onclick="$(this).parent().remove()" style="cursor: pointer;"></i><input type="hidden" name="cate_ids[]" value="'+cate_id+'"></span>';
		$(this).parent().before(cate_html);
	});
    $('.skin-minimal input').iCheck({
        checkboxClass: 'icheckbox-blue',
        radioClass: 'iradio-blue',
        increaseArea: '20%'
    });
    //添加上传缩略图
    uploadImage($("#fileList"), null, $('#form-product-add'), 'thumb_img');
    //添加上传轮播图
    uploadImage($("#fileList1"), null, $('#form-product-add'), 'swiper_img[]', '#filePicker1', 5);
    $("#form-product-add").validate({
        onkeyup:false,
        focusCleanup:true,
        success:"valid",
        submitHandler:function(form){
            $(form).ajaxSubmit({
				type: 'post',
				url: '{:url("Product/productAdd")}',
				success:function(res){
                if(1 == res.code){
                    var index = parent.layer.getFrameIndex(window.name);
                    layer.msg(res.msg, {icon:6, time:1000});
                    setTimeout(function(){
                        parent.location.reload();
                        parent.layer.close(index);
                    }, 1000);
                }else{
                    layer.msg(res.msg, {icon: 5,time:1000});
                }
            }});
        }
    });
    $(".prop_search_btn").click(function () {
		var key = $.trim($(".prop_search").val());
		console.log(key)
		if(key == ""){
			$(".prop_value").css("display","inline-block");
		}else{
			//过滤已选中选项
			$.each($(".prop_value"), function (i,v) {
				//查看是否选中
				if(!$(v).find("input[type=checkbox]").prop("checked")){
					var pname = $(v).text();
					console.log(pname);
					if(pname.indexOf(key) != -1){
						$(v).css("display", "inline-block");
					}else{
						$(v).css("display", "none");
					}
				}
			})
		}
	});
});
jQuery.Huitab =function(tabBar,tabCon,class_name,tabEvent,i){
	var $tab_menu=$(tabBar);
	// 初始化操作
	$tab_menu.removeClass(class_name);
	$(tabBar).eq(i).addClass(class_name);
	$(tabCon).hide();
	$(tabCon).eq(i).show();

	$tab_menu.bind(tabEvent,function(){
		$tab_menu.removeClass(class_name);
		$(this).addClass(class_name);
		var index=$tab_menu.index(this);
		$(tabCon).hide();
		$(tabCon).eq(index).show()})}
</script>
</body>
</html>